<template>
	<view class="content" :style="{ '--color': color }">
		<!-- 	<status-bar ref='statusbar' :title='title' back='0' search='1'></status-bar> -->
		<!-- 购物车列表 -->
		<view class="list-box" v-if="cartList && cartList.length > 0">
			<view class="cartList flex-box align-center f-nowrap" v-for="(item, index) in cartList" :key="index">
				<view class="selectInput">
					<view class="selectList" :class="!item.checked ? 'bor' : 'thmeBg'" :style="{ '--color': color }"
						@click="checkeds(index)">
						<text class="iconfont icon-xuanzhong"></text>
					</view>
				</view>
				<view class="spImages f-shrink-0" @click="toGoods(item.goods_id)">
					<image :src="$imgUrls(item.goodsImg)" mode="aspectFill"></image>
				</view>
				<view class="spxiangqing flex flex-box">
					<view>
						<view class="flex-box flex-between">
							<text class="describe lines2" @click="toGoods(item.goods_id)">{{ item.goods_name }}</text>
							<view>
								<text class="icon-del" @click="remove(index, item.car_id)">删除</text>
							</view>
						</view>
						<!-- 规格 -->
						<view class="specs-show" v-if="item.operation_text">
							<text class="d-inline-block">规格：{{ item.operation_text }}</text>
						</view>
					</view>

					<view class="operation flex-box flex-between">
						<text class="myPrice">{{ item.price }}</text>
						<view>
							<view class="btns" :class="{ notClick: item.num == 1 }"
								@click="increase(index, item.car_id, item.num, item.storeNum, 1)">-</view>
							<text class="gmNub">{{ item.num }}</text>
							<!-- <input type="number" class="gmNub" @blur="increase(index,item.car_id,item.number,item.storeNum,3)" v-model="item.num"/> -->
							<view class="btns" :class="{ notClick: parseInt(item.num) >= parseInt(item.storeNum) }"
								@click="increase(index, item.car_id, item.num, item.storeNum, 2)">
								+
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<empty v-if="nothing" pad="30" type="1" cat="4" :msg="title + '空空的，本喵不开心~'"></empty>
		<!-- 猜你喜欢 -->
		<view style="padding: 24rpx" v-if="goodsList && goodsList.length > 0">
			<view class="flex-box flex-center align-center youTitle">
				<text class="toLeft"></text>
				<text class="toLeft"></text>
				<view>猜你喜欢</view>
				<text class="toRight"></text>
				<text class="toRight"></text>
			</view>
			<view class="my-box">
				<view class="left-box">
					<view class="repeatGoodsList">
						<view v-for="(item, index) in goodsLeftList" :key="index" @click="toGoods(item.goods_id)"
							class="my-goods-box" :class="'goods-' + item.goods_id">
							<image :src="item.img ? $imgUrls(item.img) : ''" mode="widthFix" class="goodImg"
								:data-name="item.name" :data-id="item.goods_id" :data-type="item.type"
								@error="onImageLoad" @load="onImageLoad"></image>
							<view class="goods-box-msg">
								<view class="thmeTxt lines2 hisGoodsName2">
									<text v-if="item.type == 1" class="speTag">特价</text>
									<text v-if="item.type == 2" class="speTag">团购</text>
									{{ item.name }}
								</view>
								<!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
								<view class="profitTitle_ lines" v-if="item.profitTitle">
									<text>{{ item.profitTitle }}</text>
								</view>
								<view class="prices flex-box flex-between">
									<view class="priceNow">
										<text
											class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
										<template
											v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
											<text class="priceReg myPrice">{{ item.full_price }}</text>
										</template>
										<template
											v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
											<text class="priceReg myPrice">{{ item.full_price }}</text>
										</template>
									</view>
									<!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
								</view>
							</view>
							<view class="maskObtained" v-if="item.state == 0">
								<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="right-box">
					<view class="repeatGoodsList">
						<view v-for="(item, index) in goodsRightList" :key="index" @click="toGoods(item.goods_id)"
							class="my-goods-box" :class="'goods-' + item.goods_id">
							<image :src="item.img ? $imgUrls(item.img) : ''" mode="widthFix" class="goodImg"
								:data-name="item.name" :data-id="item.goods_id" :data-type="item.type"
								@error="onImageLoad" @load="onImageLoad"></image>
							<view class="goods-box-msg">
								<view class="thmeTxt lines2 hisGoodsName2">
									<text v-if="item.type == 1" class="speTag">特价</text>
									<text v-if="item.type == 2" class="speTag">团购</text>
									{{ item.name }}
								</view>
								<!-- <view class="saled" v-if='hot == 1'>
									<text>已售{{item.sales_number}}</text>
									<text>热度{{item.show_number}}</text>
								</view> -->
								<view class="profitTitle_ lines" v-if="item.profitTitle">
									<text>{{ item.profitTitle }}</text>
								</view>
								<view class="prices flex-box flex-between">
									<view>
										<view class="priceNow">
											<text
												class="price myPrice">{{ item.type == 2 ? item.open_group_price : item.price }}</text>
											<template
												v-if="(item.type == 1 || item.type == 0) && parseFloat(item.price) != parseFloat(item.full_price)">
												<text class="priceReg myPrice">{{ item.full_price }}</text>
											</template>
											<template
												v-if="item.type == 2 && parseFloat(item.full_price) != parseFloat(item.open_group_price)">
												<text class="priceReg myPrice">{{ item.full_price }}</text>
											</template>
										</view>
									</view>
									<!-- <view class="position flex-box align-center" v-if='position == 1 && positionshow == 1 && item.distance'>
										<text class="iconfont icon-dingwei"></text>
										<text class="txt">{{parseFloat(item.distance)>999?(parseFloat(item.distance)/1000).toFixed(2)+'km':parseFloat(item.distance).toFixed(2)+'m'}}</text>
									</view> -->
								</view>
							</view>
							<view class="maskObtained" v-if="item.state == 0">
								<image :src="staticUrl + '/images/Obtained.png'" class="icon-obtained"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部操作 -->
		<view class="bottom-box" v-if="cartList.length > 0">
			<view class="bottomf flex-box flex-between">
				<view class="leftPic flex-box align-center">
					<view @click="allCheckeds" class="flex-box align-center">
						<view class="selectList" :class="!allChecked ? 'bor' : 'thmeBg'" :style="{ '--color': color }">
							<text class="iconfont icon-xuanzhong"></text>
						</view>
						<text class="qselect">全选</text>
					</view>
					<text class="total">
						合计：
						<text class="cost">{{ parseFloat(total).toFixed(2) }}</text>
					</text>
				</view>
				<view class="rightBtn thmeBg" @click="edtorOrder">去结算</view>
			</view>
		</view>

		<showModel v-if="showModal" @cancelFunc="closeModel" type="99" @certain="delCart"
			:title="'是否确定删除该' + nameDefinition.goodsName + '？'" msg="删除后将不可恢复" btn1="取消" btn2="我很确定"></showModel>
		<tabBar v-if="isflag" :tab="7"></tabBar>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	var that
	export default {
		data() {
			return {
				showModal: false,
				carIndex: -1,
				carId: '',
				imgUrl: this.imgUrl,
				total: 0,
				cartList: [], // 商品列表
				allChecked: false,
				commodity: [],
				adIds: [], // 选中的商品ID
				nothing: false, // 购物车为空

				staticUrl: this.staticUrl,

				goodsList: [],
				goodsListCount: 0, //加载第i张图片
				goodsLeftList: [], // 左侧商品列表
				goodsLeftListHeight: 0,
				goodsRightList: [], // 右侧商品列表
				goodsRightListHeight: 0
			}
		},
		onShow() {
			this.getCart()
		},
		methods: {
			getCart() {
				// 7、获取购物车数据
				let that = this
				that.allChecked = false
				that.total = 0
				that.$http
					.post({
						url: '/zzj_singleSaleApi/cartList'
					})
					.then((res) => {
						if (res.errcode == 100 && res.data) {
							that.nothing = false
							that.cartList = res.data
							that.goodsList = []
						} else {
							that.cartList = []
							that.nothing = true
							that.getUlike()
						}
					})
			},
			getUlike() {
				// 猜你喜欢
				let that = this
				that.$http
					.post({
						url: '/singleSaleApi/guessLikeGoods'
					})
					.then((res) => {
						if (res.data) {
							if (that.goodsList.length < 1) {
								that.goodsList = res.data
								that.goodsLeftList.push(res.data[0])
							}
						} else {
							that.goodsList = []
						}
					})
			},
			onImageLoad: function(e) {
				let that = this
				let rImgH = 0
				var goodsId = 'goods-' + e.target.dataset.id
				uni.createSelectorQuery()
					.in(this)
					.select('.' + goodsId)
					.boundingClientRect(function(data) {
						rImgH += data.height
						if (that.goodsListCount == 0) {
							that.goodsLeftListHeight += rImgH //第一张图片高度加到goodsLeftListHeight
							that.goodsListCount++
							that.goodsRightList.push(that.goodsList[that
								.goodsListCount]) //添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
						} else {
							that.goodsListCount++
							if (that.goodsLeftListHeight > that.goodsRightListHeight) {
								//把图片的高度加到目前高度更低的栏中
								that.goodsRightListHeight += rImgH
							} else {
								that.goodsLeftListHeight += rImgH
							}
							if (that.goodsListCount < that.goodsList.length) {
								//根据目前的栏高，把下一张图片，push到低的那栏
								if (that.goodsLeftListHeight > that.goodsRightListHeight) {
									that.goodsRightList.push(that.goodsList[that.goodsListCount])
								} else {
									that.goodsLeftList.push(that.goodsList[that.goodsListCount])
								}
							}
						}
					})
					.exec()
			},
			closeModel() {
				let that = this
				that.showModal = false
				that.getCart()
			},
			// 手动修改购物车商品数量
			changeNumber(index, number) {
				let that = this
				that.cartList[index].num = number
			},

			edtorOrder() {
				let that = this
				var buyState = uni.getStorageSync('buyState')
				if (buyState == 0) return this.$Toast('您已无购买权限！')
				// 去结算
				try {
					uni.removeStorageSync('car_id')
				} catch (e) {
					// error
				}
				if (that.adIds.length > 0) {
					var adIds = that.adIds.join(',')
					uni.setStorage({
						key: 'buyway',
						data: ''
					})
					uni.navigateTo({
						url: '/orderPage/order/createOrders?car_id=' + adIds
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: '请选择' + that.nameDefinition.goodsName + '!'
					})
				}
			},
			reduce(i, carId) {
				let that = this
				if (parseInt(that.cartList[i].num) > 1) {
					that.$http
						.post({
							// 10.购物车减去数量
							url: '/zzj_singleSaleApi/decCart',
							data: {
								car_id: carId,
								num: that.cartList[i].num
							}
						})
						.then((res) => {
							if (res.code == 100) {
								let n = parseInt(that.cartList[i].num)
								that.cartList[i].num = n--
								that.totalPrice()
							} else {
								uni.showToast({
									title: res.msg,
									duration: 1500
								})
							}
						})
				} else {
					uni.showToast({
						title: '数量不能少于1哦'
					})
				}
			},
			increase(i, carId, number, storeNum, type) {
				let that = this
				// type:  1减  2加  3修改
				var num = parseInt(number)
				var storeNum = parseInt(storeNum)
				if (type == 1 && num < 2) {
					uni.showToast({
						icon: 'none',
						title: '数量不能少于1'
					})
					return
				}
				if (type == 2 && num < storeNum) {
					num++
				}
				if (num >= storeNum) {
					uni.showToast({
						icon: 'none',
						title: '库存不足了哦'
					})
					return
				}
				if (type == 1 && num > 1) {
					num--
				}
				// if(type == 3 && num < storeNum){
				// 	num = num
				// }
				that.$http
					.post({
						url: '/zzj_singleSaleApi/incCart',
						data: {
							car_id: carId,
							num: num
						}
					})
					.then((res) => {
						if (res.errcode == 100) {
							that.cartList[i].num = num
							that.totalPrice()
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500,
								icon: 'none'
							})
						}
					})
			},
			delCart() {
				let that = this
				that.$http
					.post({
						// 8、删除购物车
						url: '/zzj_singleSaleApi/delCart',
						data: {
							car_id: that.carId
						}
					})
					.then((res) => {
						if (res.errcode == 100) {
							that.$delete(that.cartList, that.carIndex)
							that.totalPrice()
							if (that.cartList.length < 1) {
								that.nothing = true
								that.allChecked = false
								that.$emit('isEmpty', 1)
							}
						} else {
							uni.showToast({
								title: res.msg,
								duration: 1500
							})
						}
						that.showModal = false
					})
			},
			remove(i, carId) {
				let that = this
				that.carId = carId
				that.carIndex = i
				that.showModal = true
			},
			checkeds(i) {
				let that = this
				// 单选
				that.cartList[i].checked = !that.cartList[i].checked
				that.totalPrice()
				var j = 0,
					len = that.cartList.length
				that.adIds = []
				for (let l = 0; l < len; l++) {
					if (that.cartList[l].checked === true) {
						j++
						that.adIds.splice(0, -1, that.cartList[l].car_id)
					}
					if (l == len - 1) {
						if (j < len) {
							// 并未全选
							that.allChecked = false
						} else {
							// 全选
							that.allChecked = true
						}
					}
				}
				that.cartList = [].concat(that.cartList)
			},
			allCheckeds() {
				let that = this
				// 全选
				if (that.cartList.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请先添加' + that.goodsName + '哦'
					})
					return
				}
				that.adIds = []
				if (that.allChecked) {
					for (let i in that.cartList) {
						that.cartList[i].checked = false
					}
				} else {
					for (let i in that.cartList) {
						that.cartList[i].checked = true
						that.adIds.splice(0, -1, that.cartList[i].car_id)
					}
				}
				that.allChecked = !that.allChecked
				that.totalPrice()
			},
			totalPrice() {
				let that = this
				// 计算总价
				let totals = 0
				for (let i in that.cartList) {
					if (that.cartList[i].checked) {
						totals += parseFloat(that.cartList[i].price) * parseInt(that.cartList[i].num)
					}
				}
				that.total = totals.toFixed(2)
			}
		},
		computed: {
			...mapState(['nameDefinition', 'tabTitle', 'vid', 'share', 'color', 'tabBar']),

			isflag() {
				const tabs = this.tabBar.list
				return tabs.some((n) => n.id == 2)
			},
			title() {
				return this.tabTitle ? this.tabTitle : '购物车'
			}
		},
		onShareAppMessage(res) {
			let share = this.share
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=999`,
				imageUrl: `${share.imageUrl}`
			}
		},
		onPullDownRefresh() {
			let that = this
			that.cartList = []
			that.getCart()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 1000)
		}
	}
</script>

<style scoped lang="scss">
	.selectList {
		width: 36rpx;
		height: 36rpx;
		border-radius: 100%;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.content {
		box-sizing: border-box;

		.list-box {
			padding-bottom: 20rpx;

			.cartList {
				margin: 20upx;
				padding: 20rpx 20rpx 20rpx 10rpx;
				background: #ffffff;
				overflow: hidden;
				margin-bottom: 8upx;
				box-shadow: 0 0 8rpx 1px rgba(0, 0, 0, 0.08);
				border-radius: 16upx;
				height: 240upx;

				.selectInput {
					padding: 30rpx 10rpx;
				}

				.spImages {
					width: 200upx;
					height: 200upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.spxiangqing {
					position: relative;
					flex-direction: column;
					justify-content: space-between;
					padding-left: 10rpx;
					height: 100%;

					.describe {
						font-size: 26rpx;
						line-height: 40rpx;
						flex: 1;
						text-align: justify;
						margin-right: 10upx;
					}

					.icon-del {
						color: red;
						padding-left: 10rpx;
					}

					.specs-show {
						// height: 40upx;
						display: flex;
						align-items: center;
						overflow: hidden;
						margin-top: 10rpx;

						text {
							font-size: 22rpx;
							color: #999;
							background-color: #eeeeee;
							border-radius: 4upx;
							padding: 4upx 8upx;
							// white-space: nowrap;
							// text-overflow: ellipsis;
						}
					}

					.operation {
						width: 100%;
						overflow: hidden;
						margin-top: 16rpx;
						align-items: flex-end;

						.myPrice {
							color: $uni-color-price;
							font-size: 30rpx;
							font-weight: bold;
						}

						.notClick {
							background: #f2f2f2;
							color: #d5d5d5;
						}

						.gmNub {
							float: left;
							height: 44upx;
							border: 1upx solid #dddddd;
							border-radius: 10upx;
							width: 110upx;
							margin: 0 10upx;
							text-align: center;
							color: #d5d5d5;
							line-height: 44upx;
							min-height: auto;
							box-sizing: border-box;
						}

						.btns {
							width: 44upx;
							height: 44upx;
							border: 1upx solid #dddddd;
							border-radius: 10upx;
							float: left;
							text-align: center;
							line-height: 36upx;
							color: #333333;
							font-size: 40upx;
						}
					}
				}
			}
		}

		.bottom-box {
			height: 100rpx;

			.bottomf {
				width: 100%;
				height: 100rpx;
				background: #ffffff;
				overflow: hidden;
				position: fixed;
				left: 0;
				bottom: calc(100rpx + constant(safe-area-inset-bottom));
				bottom: calc(100rpx + env(safe-area-inset-bottom));
				border-top: 1upx solid #efefef;
				z-index: 5;

				.leftPic {
					overflow: hidden;
					padding-left: $uni-page-space;

					.qselect {
						color: #666666;
					}

					.total {
						color: #333333;
						margin-left: 50upx;
						font-size: 26rpx;

						.cost {
							color: $uni-color-price;
							margin-right: 10upx;
							font-weight: bold;
							font-size: 32rpx;
						}
					}
				}

				.rightBtn {
					width: 200upx;
					height: 100upx;
					color: #ffffff;
					text-align: center;
					line-height: 100upx;
				}
			}
		}
	}

	.bor {
		border: 1px solid #afafaf;
	}
</style>